.fourth {
    width: 100%;
    height: 100%;
    position: relative;
    background: url(./images/1bj.jpg) center center no-repeat;
    background-size: cover;
    opacity: 0;
    animation: bjs 1s 0.5s;
    animation-fill-mode: forwards;

    @keyframes bjs {
        from {
            opacity: 0.3;
        }

        to {
            opacity: 1;
        }
    }

    .font1 {
        position: absolute;
        background: url(./images/font2.png) no-repeat;
        background-size: cover;
        width: 0.94rem;
        height: 0.54rem;
        left: 3%;
        bottom: 37%;
        z-index: 1;
        opacity: 0;
        animation: font1 2s 1.5s;
        animation-fill-mode: forwards;
    }

    @keyframes font1 {
        from {
            opacity: 0;
            transform: translateX(-100px);
        }

        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    .font3 {
        position: absolute;
        background: url(./images/font1.png) no-repeat;
        background-size: cover;
        width: 1.2rem;
        height: 0.97rem;
        left: 17%;
        bottom: 24.35%;
        z-index: 1;
        opacity: 0;
        animation: font3 2s 1.5s;
        animation-fill-mode: forwards;
    }

    @keyframes font3 {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    .font2 {
        position: absolute;
        background: url(./images/font3.png) no-repeat;
        background-size: cover;
        width: 1.23rem;
        height: 0.41rem;
        left: 17%;
        bottom: 16%;
        z-index: 1;
        opacity: 0;
        animation: font2s 3s 1.5s;
        animation-fill-mode: forwards;
    }

    @keyframes font2s {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }
}